/*
 * @Descripttion: 
 * @version: 
 * @Author: Lee
 * @Date: 2020-05-25 10:41:46
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-05-27 16:09:38
 */

import Observer from './observer';
import Compiler from './compiler';

/**
 * @name: 
 * @test: test font
 * @msg: 打包的源文件
 * @param {type} 
 * @return: 
 */
class Vue {
    constructor(options) {
        // 获取元素DOM对象
        // 这里是获取页面传进来的 #app DOM对象 <div id="app">...</div>
        this.$el = document.querySelector(options.el);
        // 转存数据
        // 这里是获取页面传进来的 data对象 {msg: hello world}
        this.$data = options.data || {};
        // 数据和函数的代理
        // 使得vm.$data.msg 可以以vm.msg方式使用
        this._proxyData(this.$data);
        // 函数代理
        this._proxyMethods(options.methods)
        // 数据劫持
        // 得到 {msg: "hello world"}
        new Observer(this.$data);
        // 模板编译
        // 得到 window.Vue {$el: div#app, $data: {…}}
        new Compiler(this);
    }
    /**
     * @name: 数据代理
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    _proxyData(data) {
        Object.keys(data).forEach(key => {
            Object.defineProperty(this, key, {
                get() {
                    return data[key];
                },
                set(newValue) {
                    data[key] = newValue;
                }
            });
        });
    }

    /**
     * @name: 函数代理
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    _proxyMethods(methods) {
        if (methods && typeof methods === "object") {
            Object.keys(methods).forEach(key => {
                this[key] = methods[key];
            });
        }
    }

}
// 把vue挂载到window上
window.Vue = Vue;